<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 150px;height: 200px;
            background: #55a532;position: absolute;left: -150px;
        }
        p{
            width: 30px;background: #990055;color: white;
            position: absolute;left: 150px;top: 46px;
            line-height: 25px;text-align: center;
        }
    </style>
</head>
<body>
<!--
    分享到：

    需求： 移入box框，改变left属性值从-150px --- 0px

    需求： 移出box框，改变left属性值从0px --- -150px

        1. 制作静态效果
-->
    <div id="box">
        <p>分享到</p>
    </div>
    <script type="text/javascript">
        var box = document.getElementById("box");
        box.onmouseover = function () {
            moveDiv(0,10);
        }        
        box.onmouseout = function () {
            moveDiv(-150,-10);
        }
        //注册移入事件(speed是有方向的)
        var timer = null;
        function moveDiv(target,speed) {
            clearInterval(timer);
            timer = setInterval(function () {
                //判断是否到达终点
                if(box.offsetLeft==target){
                    clearInterval(timer);
                }else{
                    box.style.left = box.offsetLeft + speed +"px";
                }
            },30)
        }




    </script>

</body>
</html>